<template>


    <el-form :inline="true" :model="formData">
       
        <el-form-item label="名称">
            <el-input v-model="formData.name"  clearable />
        </el-form-item>


        <el-form-item>
            <el-button type="primary" @click="onsubmit">查询</el-button>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="add">添加</el-button>
        </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column fixed prop="id" label="编号" width="80" />
        <el-table-column prop="name" label="名称" width="150" />
        <el-table-column prop="description" label="描述" width="180" />
        <el-table-column  label="操作" width="200">
            <template #default="scope">
                <el-button type="primary" size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import { useRouter } from 'vue-router'
import {   rolesApi } from '@/api'
import { ElMessage, ElMessageBox } from 'element-plus'

const router = useRouter()

const tableData = ref<any>([])

const formData = reactive({  id: "", name: ""})


onMounted(() => {

    callApi()
})



const onsubmit = () => {

    callApi()
}


const add = () => {

    router.push({ path: '/role/add' })
}


const callApi = () => {

    rolesApi.select().then((res: any) => {

        console.log(res)

        tableData.value = res
    })
}

const handleEdit = (row: any) => {

    router.push({ path: '/role/edit', query: { id: row.id } })
}

const handleDelete = (row: any) => {

      ElMessageBox.confirm(
        '你确定要删除 ' + row.name + ' 吗?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {

            rolesApi.delete({ id: row.id }).then((res: any) => {

                ElMessage.success('删除成功')
                callApi()
            })

        })
        .catch(() => {

        })
}



</script>